<template>
  <div class="deals-grid">
    <div class="deals-header">
      <div class="deals-filters">
        <el-select v-model="selectedLevel1" :placeholder="$t('一级分类')" clearable @change="changeCategory(1)">
          <el-option
            v-for="category in cartStore.fatherCategoryList"
            :key="category.id"
            :value="category.catId"
            :label="category.name"
          />
        </el-select>
        <div>
          
        </div>
        <!-- <el-select v-model="selectedLevel2" :placeholder="$t('二级分类')" clearable @change="changeCategory(2)">
          <el-option
            v-for="category in selected2List"
            :key="category.id"
            :value="category.catId"
            :label="category.name"
          />
        </el-select> -->
      </div>
    </div>

    <el-empty v-if="!productsList.length" :description="$t('暂无商品')" />

    <div class="deals-list">
      <DealCard
        v-for="deal in productsList"
        :key="deal.id"
        :deal="deal"
      />
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, prev, pager, next"
        background
        class="amazon-pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import DealCard from './DealCard.vue'
import useCartStore from "@/store/modules/cart.js";
import { ApiCommoditySeckillList, ApiGategoriesNode} from "@/api/commodity.js";
import useLangStore from "@/store/modules/lang.js";
import {ElLoading} from "element-plus";
import {useI18n} from "vue-i18n";
const { t } = useI18n();

const cartStore = useCartStore()
const selectedLevel1 = ref('')
const selectedLevel2 = ref('')
const selected2List = ref([])
const productsList = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 加载数据
const getProducts = () => {
  const loading = ElLoading.service()
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    level1: selectedLevel1.value,
    level2: selectedLevel2.value
  }
  ApiCommoditySeckillList(params).then(res => {
    productsList.value = res.rows || []
    total.value = res.total
  }).finally(() => {
    loading.close()
  })
}

const getGategoriesNode = () => {
  ApiGategoriesNode({
    catid: selectedLevel1.value
  }).then(res => {
    selected2List.value = res.data
  })
}

const changeCategory = (type) => {
  if(type === 1) {
    selectedLevel2.value = ''
    getGategoriesNode()
  }
  getProducts()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  getProducts()
}

const handleCurrentChange = (val) => {
  pageNum.value = val
  getProducts()
}

onMounted(() => {
  getProducts()
  getGategoriesNode()
})
</script>

<style lang="scss" scoped>
.deals-grid {
  .deals-header {
    margin-bottom: 20px;
  }

  .deals-filters {
    display: flex;
    gap: 16px;
  }

  .filter-select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    min-width: 150px;
  }

  .deals-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;

    @media (max-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
  }
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
:deep(.amazon-pagination) {
  .el-pagination__total {
    color: #565959;
  }

  .el-pager li {
    &:not(.is-disabled).is-active {
      background-color: #d91818;
      border-color: #d91818;
    }
  }
}
</style>
